<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyPage</title>
</head>

<body>
    <div class="backcolor3"></div>
    <div class="backcolor2"></div>
    <div class="backcolor"></div>
    <div class="main" id="app">
        <div class="top">
        </div>
        <div class="content">
            <div class="search">
                <input type="text" placeholder="站内搜索" v-model="searchTerm" @blur="searchListShow = false"
                    @focus="searchListShow = true">
                <div class="search-btn">
                    搜索
                </div>
                <Transition name="search-list">
                    <ul class="search-list" v-show="searchList.length > 0 && searchListShow">
                        <li class="search-item" v-for="item in searchList" :key="item.name">
                            <a :href="item.url">{{ item.name }}</a>
                        </li>
                    </ul>
                </Transition>

            </div>
            <div class="content-list">
                <div class="list-card" v-for="item in showURL" :key="item.type">
                    <div class="card-title">{{ item.type }}</div>
                    <ul class="card-body">
                        <li class="card-item" v-for="link in item.children" :key="link.name">
                            <a :href="link.url">{{ link.name }}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="foot">
                <div class="icp"><a href="https://beian.miit.gov.cn" target="_blank">豫ICP备2025144901号</a></div>
                <ul class="about">
                    <li><a href="https://space.bilibili.com/145482994" target="_blank">bilibili</a></li>
                    <li><a href="https://v.douyin.com/bcuAXNGYi80" target="_blank">抖音</a></li>
                    <li><a href="https://gitee.com/guhunjun" target="_blank">gitee</a></li>
                </ul>
            </div>
        </div>

    </div>
</body>

</html>
<style>
    html,
    body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        background: linear-gradient(to bottom right, #94d5e6, #f3c1ff);
    }

    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .top {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .content {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .content .search {
        margin: auto;
        width: 50%;
        min-width: 340px;
        position: relative;
        border-radius: 23px;
        box-shadow: #0004 0 0 15px -5px;
    }

    .search input {
        padding: 15px;
        padding-left: 20px;
        border-radius: 23px 0 0 23px;
        border: none;
        width: calc(100% - 115px);
        font-size: 16px;
        height: 16px;
        transition: .5s;
    }

    .search input:focus {
        outline-color: #6d6fff66
    }

    .search-btn {
        position: absolute;
        right: 0;
        top: 0;
        padding: 15px 28px 15px 20px;
        text-align: left;
        height: 16px;
        line-height: 16px;
        border-radius: 0 23px 23px 0;
        background-color: #cddeff4a;
        cursor: pointer;
        transition: .5s;
    }

    .search-btn:hover {
        background-color: #0013422f;
        color: #fff;
    }

    .search-list {
        position: absolute;
        /* background: red; */
        width: 100%;
        padding: 2px;
        max-height: 350px;
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: #0004 0 0 10px -3px;
        transition: .5s;
    }

    .search-list .search-item {
        cursor: pointer;
        background-color: #e3fcff;
        margin: 2px;
        border-radius: 10px;
        transition: .15s;
    }

    .search-item a {
        /* width: 100%; */
        display: block;
        padding: 8px 20px;
    }

    .search-list .search-item:hover {
        background-color: #d9fffa;
    }

    .search-list-enter-active,
    .search-list-leave-active {
        transition: opacity 0.5s ease;
    }

    .search-list-enter-from,
    .search-list-leave-to {
        opacity: 0;
    }

    .content-list {
        width: 60%;
        min-width: 350px;
        height: 50%;
        max-height: 350px;
        padding: 20px;
        box-sizing: border-box;
        margin: auto;
        margin-top: 0;
        box-shadow: #0004 0 0 15px -5px;
        border-radius: 10px;

        display: flex;
        overflow-x: auto;
        gap: 10px;
    }

    .foot {
        bottom: 0;
        width: 100%;
        height: 80px;
        background: #fff1;
        display: flex;
        position: relative;
    }



    .icp {
        margin: auto;
    }

    .about {
        margin: auto;
        margin-right: 50px;
        margin-left: 0;
    }

    .list-card {
        flex: 0 0 250px;
        background: #fff2;
        padding: 10px;
        border: #6d6fff66 solid 2px;

    }

    .card-title {
        text-align: center;
    }

    .card-body {
        overflow-y: auto;

    }

    .card-item {
        text-align: center;
        padding: 2px 0;
        margin: 4px 2px;
        width: calc(100% - 5px);
        background: #fff4;
        transition: .15s;
    }

    .card-item:hover {
        background: #fff8;
    }

    .card-item a {
        width: 100%;
        display: block;
    }

    /* #region 背景*/
    .backcolor,
    .backcolor2,
    .backcolor3,
    .main {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
    }

    .backcolor {
        display: flex;
        animation: turnColor 10s infinite;
        background: linear-gradient(to top right, #cde0a8, #e2aff6);
    }

    .backcolor2 {
        animation: turnColor2 10s infinite;
        background: linear-gradient(to bottom right, #f0b6da, #d5f3b2);
    }

    .backcolor3 {
        animation: turnColor3 10s infinite;
        background: linear-gradient(to top right, #d0b0e7, #a9e5eb);
    }

    @keyframes turnColor {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        75% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes turnColor2 {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        75% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes turnColor3 {
        0% {
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        75% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    /* #endregion 背景*/
</style>
<script type="module">
    import { createApp } from './lib/vue-esm.js'
    createApp({
        data() {
            return {
                urlData: null,  // 搜索功能全能搜到
                searchTerm: '',
                searchList: [],
                searchListShow: false,
                showURL: [// 用于主页展示
                    {
                        type: '办公相关',
                        children: [
                            { name: "授课计划表计算器" },
                            { name: "期卷号计算器" },
                            { name: "名单分组" },
                        ]
                    },
                    {
                        type: '个人工具',
                        children: [
                            { name: "CSS示例" },
                            { name: "随舞海报生成器" },
                            { name: "代码生成器", },
                            { name: "python模型类的生成", },
                        ]
                    }
                ]
            }
        },
        watch: {
            // 监听搜索词变化
            searchTerm(newVal) {
                this.searchItems(newVal);
            }
        },
        methods: {
            // 搜索匹配项目
            searchItems(term) {
                // 如果搜索词为空，不打印
                if (!term.trim()) {
                    this.searchList = [];
                    this.searchListShow = false;
                    return;
                }
                // 转换为小写，实现不区分大小写的搜索
                const lowerTerm = term.toLowerCase();

                // 查找匹配项
                const matches = this.urlData.filter(item => {
                    // 检查url、name、detail三个字段是否包含搜索词
                    return item.url.toLowerCase().includes(lowerTerm) ||
                        item.name.toLowerCase().includes(lowerTerm) ||
                        item.detail.toLowerCase().includes(lowerTerm);
                });
                this.searchList = matches;
                this.searchListShow = true;
                // 在控制台打印匹配结果
                // console.log(`搜索 "(${term})" 找到 ${matches.length} 个匹配项:`, matches);
            }
        },
        mounted() {
            fetch('/url.json')
                .then(res => res.json())
                .then(data => {
                    this.urlData = data;
                    // 根据urlData的内容补全showURL
                    for (let i in this.showURL) {
                        for (let ii in this.showURL[i].children) {
                            const item = this.showURL[i].children[ii];
                            for (let j in this.urlData) {
                                if (item.name == this.urlData[j].name) {
                                    item.url = this.urlData[j].url;
                                    item.detail = this.urlData[j].detail;
                                }
                            }
                        }
                    }
                });


        }
    }).mount('#app')

</script>